<template>
  <page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="message-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-back" @click="handleBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <text class="nav-title">共有{{ overdueMessages?.length }}条数据</text>
      <view class="nav-actions">
        <!-- <button class="delete-btn" @click="handleDeleteAll" v-if="overdueMessages.length > 0">
          <text class="delete-text">清空</text>
        </button> -->
      </view>
    </view>

    <!-- 消息列表 - 仅显示只显示工单超期提醒 -->
    <view class="message-list">
      <view class="message-item" v-for="(message, index) in overdueMessages" :key="message.id"
        :class="{ unread: !message.read }" @click="handleMessageClick(message, index)">
        <!-- 消息图标 -->
        <view class="message-icon overdue-icon">
          <uni-icons type="clock" size="24" color="#fff"></uni-icons>
        </view>

        <!-- 消息内容 -->
        <view class="message-content">
          <view class="message-header">
            <text class="message-title-title text13">{{ message.overdueTitle }}</text>
          </view>
          <text class="message-desc text12">{{ message.overdueContent }}</text>

          <!-- 工单信息 -->
          <view class="order-info">
            <view class="space2">
              <wd-tag mark>
                <text class="text11">待指派</text>
              </wd-tag>
            </view>

            <wd-tag custom-class="space " type="danger" mark>
              <text class="text11">紧急</text>
            </wd-tag>
            <!--  <view class="order-detail">
              <text class="label">工单编号：</text>
              <text class="value">{{ message.orderNo }}</text>
            </view> -->
            <!-- <view class="order-detail">
              <text class="label">超期时间：</text>
              <text class="value overdue-time">{{ message.overdueTime }}</text>
            </view> -->
            <view class="order-detail">
              <text class="label text12">创建人：</text>
              <text class="value overdue-time text12"><text class="text12" style="margin: 5px 0;">宋玉琳</text> {{
                message.overdueTime }}</text>
            </view>
          </view>
        </view>

        <!-- 未读标识 -->
        <view class="unread-dot" v-if="!message.read"></view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="overdueMessages.length === 0">
        <uni-icons type="clock" size="60" color="#DDDDDD"></uni-icons>
        <text class="empty-text">暂无超期工单提醒</text>
        <text class="empty-subtext">当前有工单超期需要处理</text>
      </view>
    </view>
  </view>
  <!-- <SimpleTabBar/> -->
  <TabComponent :tabs="currentTabs" @change="onTabChange" />

</template>

<script setup>
import { commerce_msg_listApi } from "@/api/commerce"


import {
  ref,
  getCurrentInstance,
  onMounted,
  computed,
  nextTick,
  watch
} from 'vue';
import {
  useRouter
} from 'uni-mini-router'

import {
  useFontSizeStore
} from '@/stores/fontSizeStore';
import {
  useTabStore
} from '@/stores/tabs'
import {
  ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'

import { useShare } from '@/utils/useShare';
import { onShow } from '@dcloudio/uni-app';
import { getAppEnum } from "@/utils/appDataEnum"


const fontSizeStore = useFontSizeStore();
const router = useRouter();


// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
  const role = getApp()[getAppEnum.CurrentRole];
  return ROLE_TABS[role]?.tabs
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
  nextTick(() => {
    router.pushTab({
      name: tab.key
    })
  })
}
// import SimpleTabBar from '@/components/custom-tab-bar/index.vue'
// 工单超期提醒消息列表
const overdueMessages = ref([]);

onMounted(() => {
  commerce_msg_listApi({
    id: "",
    role: ""
  }).then((res) => {
    console.log("res:", res)
    overdueMessages.value = res.data
  })
})




// 消息点击事件
const handleMessageClick = (message, index) => {
  // 标记为已读
  // if (!message.read) {
  //   overdueMessages.value[index].read = true;
  // }

  // 跳转到对应的工单详情
  // uni.navigateTo({
  //   url: `/pages/orderDetail/orderDetail?id=${message.orderId}`
  // });

  router.push({
    name: "common_orderDetail",
    params: {
      status: "pending",
      id: "",
    }
  })
};

// 返回上一页
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 清空所有消息
const handleDeleteAll = () => {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空所有超期提醒吗？此操作不可恢复',
    confirmText: '确认',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        overdueMessages.value = [];
        uni.showToast({
          title: '已清空所有提醒',
          icon: 'none'
        });
      }
    }
  });
};
</script>

<style scoped lang="scss">
$primary: #1890FF;
$warning: #FF7D00;
$danger: #F53F3F;
$gray: #86909C;
$light-gray: #F2F3F5;
$border-gray: #EEEEEE;

// 页面基础样式
.message-page {
  min-height: 100vh;
  background-color: #F7F8FA;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 导航栏样式
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  background-color: #FFFFFF;
  border-bottom: 1px solid $border-gray;

  .nav-back {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }

  .delete-btn {
    background-color: transparent;
    border: none;
    color: $danger;
    font-size: 16px;
    padding: 0 10px;
    line-height: normal;
  }
}

// 消息列表
.message-list {
  padding-bottom: 20px;

  .message-item {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    background-color: #FFFFFF;
    border-bottom: 1px solid $border-gray;
    transition: background-color 0.2s;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      // background-color: $light-gray;
    }

    &.unread {
      // background-color: rgba(245, 63, 63, 0.03); // 未读消息使用浅红色背景突出
    }

    .message-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .overdue-icon {
      background-color: $danger; // 超期提醒使用红色图标
    }

    .message-content {
      flex: 1;
      min-width: 0;

      .message-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;

        .message-title {
          font-size: 16px;
          font-weight: 500;
          color: #333333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .message-time {
          font-size: 12px;
          color: $gray;
          white-space: nowrap;
        }
      }

      .message-desc {
        font-size: 14px;
        color: #666666;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .order-info {
        padding-top: 6px;
        border-top: 1px dashed $border-gray;
        margin-top: 6px;

        .order-detail {
          display: flex;
          font-size: 13px;
          margin-top: 4px;

          .label {
            color: $gray;
            flex-shrink: 0;
          }

          .value {
            color: #333333;
            margin-left: 4px;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .overdue-time {
            color: #007AFF; // 超期时间用红色突出显示
            font-weight: 500;
          }
        }
      }
    }

    .unread-dot {
      width: 8px;
      height: 8px;
      background-color: $danger; // 未读标识使用红色
      border-radius: 50%;
      margin-top: 8px;
    }
  }

  // 空状态
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    color: $gray;

    .empty-text {
      font-size: 16px;
      margin-top: 16px;
    }

    .empty-subtext {
      font-size: 14px;
      margin-top: 8px;
      color: $gray;
    }
  }
}

.space2 {
  margin-right: 10px !important;
  display: inline-block;
}
</style>